By ccdoss on

Hello,
I am trying (desperately) to address the lack of drop down menus in Drupal 5. (I'll post whatever solutions I come up with once they work). I am starting with modifying themes to allow drop downs in the primary links. I am new to css and js, but I believe I've come up with a way to get them to work. I followed the teachings of Faqing (http://www.thanhsiang.org/faqing/node/59), and have played around with his template. He modified Garland to get drop downs. However, they must be primary links, and they must be in the header for this method to work. This has caused me issues when going to another theme (i.e. fancy, newsportal), for various reasons. I'd like to let the primary links stay where they are by default for the given theme.

I've examined the html source that's output, and when the primary links are output by the page.tpl.php file, it only outputs the top-level menus. When the primary links are placed in the header, and expanded, it outputs all menus and submenus. I believe I could create drop down functionality in the css and js (using suckfish), if I could get the code that prints the primary links, i.e. print theme('navlinks', $primary_links); to output the submenus as well. Can someone help?

⋅ Categories: Drupal 5.x

Comments

mjwest10’s picture

mjwest10 commented

Hello,
I've been wrestling through these same issues. To answer your specific question, you can use this line instead of the one above.

print theme('menu_tree',variable_get('menu_primary_menu',0));

Check out this address for more details: http://drupal.org/node/68578

What I have found though is that using the nice menu module worked best for me. They have worked out most of the kinks for having dropdown menu's (like sucker fish has). I think its worth the time to figure out their CSS and override there style sheets in your own themes style.css. I discovered that all the work arounds I was trying to do manually they have also done. So I just built off of theres. Hope this helps.

faqing’s picture

faqing commented

Yes, drop-down menu can be default Primary Links:
In page.tpl.php, change 

<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>

to

<?php if (isset($primary_links)) { ?>
<div id="nav">  
<?php print theme('menu_tree',variable_get('menu_primary_menu',0)); ?>
</div>
<?php } ?>

In style.css
set the position of #nav (for drop down menu.)

I just updated my theme. Now it use default primary links.
Thank you both for inspiring me...

ccdoss’s picture

ccdoss commented

Well, Thanks to you guys' help, I was able to get slash working.
I had to do the following:
1. add fix-ie.css to the theme directory. I grabbed it from faqing's theme. I believe it's also in Garland's directory.
2. In page.tpl.php, two changes (I can't quote some things, like "<", here, because it's code):
a. Replace script type="text/javascript... with:

        <style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
    <!--[if lt IE 7]>
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style>
    <![endif]-->

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

b. Replace print theme('links', $primary_links, array('id' => 'primary'))

with 

<div id="nav">
<?php print theme('menu_tree', variable_get('menu_primary_menu',0)); ?>
</div></div>

3. Add the following to the style.css sheet. You'll need to change the colors around, but this'll get you started.

#nav{
  float: left;
  clear: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-weight: bold;
}

#nav ul li{
  float: left;
  font-size: 1.2em;
  margin-right: 5px;
  background: #660000 url(cl.png) no-repeat top left;
}

#nav ul li ul{
	position: absolute;
	width: 20em;
	left: -999em;
}

#nav li:hover {
  background: #990000 url(cl.png) no-repeat top left;
}

#nav li:hover ul{
	left: auto;
}

#nav a:link, 
#nav a:visited, 
#nav a:hover, 
#nav a:active {
  display: block;
  background: transparent url(cr.png) no-repeat top right;
  color: #fff;
  padding: 1px 6px;
  text-decoration: none;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;


}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover

ul, #nav li li li.sfhover ul {
	   left: auto;
    background: #5ab5ee;
	}

#nav li:hover, #nav li.sfhover {
      left: auto;
      background: #2385c2;

}

#nav li:hover a, #nav li.sfhover a {
    color: #ffffff;

}

#nav li li:hover a, #nav li li.sfhover a {
    color: #ffffff;

}

#nav li:hover {
	background: #2385c2;
}

I hope this helps. I'll probably look at fancy next, although I'd rather their primary links be closer to the center of the page.

emnzava’s picture

emnzava commented

Hello guys,
For some time i wanted to add drop down menu on primary links. I tried using css and js on static html page using css(tableless html page). It worked perfect. Now i want to do the same in drupal. But the only problem is how to add those div dynamically so that drop down menus can appear where they are supposed to appear.

I want the output(HTML) to look like this on primary links.

<div id="nav">
<ul>
        <li><a href="test1">Business1</a></li>
        <li><a href="test1">Business2</a></li>
        <li><a href="test1">Business3</a></li>
        <li><a href="test1">Business4</a></li>

//****** the div mentioned bellow will be the drop down menu for Business4 above.**********
              <div>
                    <ul>
                          <li><a href="test1">Drop down1</a></li>
                          <li><a href="test1">Drop down2</a></li>
                    </ul>
              </div>
//******end of drop down menu********
        <li><a href="test1">Business5</a></li>
</ul>   
</div>

Now if anybody can help out to bring something like the above output html, then we are going to have another way of implementing drop down menu.
Please keep in mind that the second div for drop down menu is not necessarily important as long as the lay out will look like the way it looks on the given codes.

Hope to hear from you soon.

Regards,
Bwax

NB: I will post full code once i manage to create drop down menu.

When it comes to coding.......the only limit is your imagination..!!!!

----------- *** ------------
The Only Easy Day Was Yesterday..!!!!

lemmax’s picture

lemmax commented

You might like to bear in mind that unordered lists may contain list elements and not divs as shown in your code snippet. List elements may contain inline and block level elements including divs.

http://htmlhelp.com/reference/html40/lists/li.html

You might want to review this before trying to build a menu based on an xhtml list.

tkolanko’s picture

tkolanko commented

Hey Chris,

Thanks for posting this, I was able to get it working. One quick question that I can't figure out, is there a way I can make the submenus display vertical instead of horizontal under it's parent?

Thanks

webalchemist’s picture

webalchemist commented

Yahooo Superb! Thank you for this!

I got the drop down implemented into Zen.

bakyildiz’s picture

bakyildiz commented

try the dropdown menu "Yahoo YUI (Menu)" http://drupal.org/project/yui

priyanka.salunke’s picture

priyanka.salunke commented

i wnt to replace primary links to superfish menu in ftdrupal004 theme

plz somebody help me